Botones con estilo CSS

Enlace como botón

Colores de botones

Cambia el color de fondo de un botón usando la propiedad background-color:

Tamaños de botones

Cambia el tamaño de fuente de un botón usando la propiedad font-size:

Relleno de botones

Cambia el relleno de un botón usando la propiedad padding:

Botones con esquinas redondeadas

Agrega esquinas redondeadas a un botón con la propiedad border-radius:

Bordes de botones con color

Usa la propiedad border para agregar un borde al botón:

Botones con efecto al pasar el mouse

Usa el selector :hover para cambiar el estilo del botón cuando mueves el cursor sobre él.

Consejo: Usa la propiedad transition-duration para determinar la velocidad del efecto "hover".

Botones con sombra

Usa la propiedad box-shadow para agregar sombras al botón:

Botón Deshabilitado

Usa la propiedad opacity para dar transparencia a un botón (para que parezca deshabilitado):

Definir Anchos de Botón

Usa la propiedad width para cambiar el ancho del botón:



Consejo: Usa píxeles para un ancho fijo y porcentaje para botones responsivos. Redimensiona la ventana del navegador para ver el efecto.

Grupo de Botones con Borde

Agrega bordes para crear un grupo de botones con borde:


Recuerda limpiar los floats después o este párrafo también flotará junto a los botones.

Botón sobre Imagen

Agrega un botón encima de una imagen:

Nieve